<ui:composition 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" >

    <h:panelGroup layout="block" style="text-align: left;">
        <h:outputText value="#{gestionMesasBean.mesa.descripcion}" style="font-size: 22px;" />
    </h:panelGroup>
    <p:separator style="background-color: yellowgreen;" />

    <h:panelGrid columns="2" columnClasses="colLabel,colDato"
                 rendered="#{empty gestionMesasBean.m and gestionMesasBean.esFechaRegistracionCorrecta}" >

        <h:outputText value="Mozo: " />
        <p:selectOneMenu id="mozo" value="#{gestionMesasBean.mozo}" style="width: 200px;"
                         effect="fade" converter="#{conversoresResto.mozo}" >

            <f:selectItem itemLabel="Seleccionar" itemValue="" />
            <f:selectItems value="#{mozosBean.lista}"
                           var="i" itemLabel="#{i.nombre}" itemValue="#{i}"/>
        </p:selectOneMenu>

        <h:outputText id="nota" value="Notas: "  />
        <p:inputTextarea value="#{gestionMesasBean.notas}" rows="2" cols="40" />
        
        <h:outputText value="" />
        <h:panelGroup layout="block" style="text-align: right;">
            <p:commandLink actionListener="#{gestionMesasBean.nuevoMovimiento}"
                   process="@this, mozo, nota"
                   update="@form" >
                Abrir Mesa
            </p:commandLink>
        </h:panelGroup>

    </h:panelGrid>

    <h:panelGroup layout="block" rendered="#{not empty gestionMesasBean.m}" >

        <h:panelGrid columns="2" columnClasses="colLabel,colDato" >

            <h:outputText value="Mozo:" />
            <h:outputText value="#{gestionMesasBean.m.mozo.nombre}" />

            <h:outputText value="Nro de ticket:" />
            <h:outputText value="#{gestionMesasBean.m.nrofor}" >
                <f:convertNumber pattern="0000000" />
            </h:outputText>

        </h:panelGrid>

        <h:panelGroup layout="block" style="text-align: left; margin-top: 10px;">
            <h:outputText value="Agregar" style="font-size: 15px;" />
        </h:panelGroup>
        <p:separator style="background-color: yellowgreen;" />


        <h:panelGrid columns="3" cellpadding="4"
                     style="width: 100%;"
                     id="pgProducto" >

            <p:inputText value="#{gestionMesasBean.cantidad}" size="4" style="text-align: right;"/>

            <p:autoComplete value="#{gestionMesasBean.producto}"
                            id="basicPojo"
                            completeMethod="#{buscadorProductoBean.completeProducto}"
                            var="p" itemLabel="#{p.artcod} - #{p.descrp}" itemValue="#{p}"
                            converter="#{conversoresInventario.producto}"
                            size="70"
                            forceSelection="true" />                
            

            <p:commandButton icon="add16"
                             update="pgProducto,tblProductos,mgrowl"
                             process="pgProducto"
                             actionListener="#{gestionMesasBean.agregarItem}" />


        </h:panelGrid>

        <p:dataTable id="tblProductos" value="#{gestionMesasBean.m.items}" var="i"
                     style="margin-top: 10px;">

            <f:facet name="header">
                <h:outputText value="Lista de producto" />
            </f:facet>

            <f:facet name="footer">

                <h:panelGroup layout="block" style="text-align: right; font-weight: bold;">
                    <h:outputText value="Total: $ " />
                    <h:outputText value="#{gestionMesasBean.totalMovimiento}" >
                        <f:convertNumber pattern="0.00" />
                    </h:outputText>
                </h:panelGroup>
                
            </f:facet>

            <p:column headerText="Cant." width="25" style="text-align: right;" >
                <h:outputText value="#{i.cantidad}" />
            </p:column>

            <p:column headerText="Descripción" width="300" >
                <h:outputText value="#{i.producto.artcod} - #{i.producto.descrp}" />
            </p:column>            

            <p:column headerText="Total" width="60" style="text-align: right;" >
                <h:outputText value="#{i.totalLinea}" >
                    <f:convertNumber pattern="$ 0.00" />
                </h:outputText>
            </p:column>

            <p:column style="text-align: center;" width="30">

                <p:commandButton immediate="true" rendered="#{not empty i.producto}"
                                 actionListener="#{gestionMesasBean.eliminarItem(i)}" icon="delete16"
                                 process="@this"
                                 update="@form"  />
            </p:column>

        </p:dataTable>

        <h:panelGroup layout="block" style="text-align: right; margin-top: 10px;">
            <p:commandLink actionListener="#{gestionMesasBean.cerrarMesa}"
                   process="@this"
                   update="@form" >
                Cerrar Mesa #{gestionMesasBean.mesa.codigo}
            </p:commandLink>
        </h:panelGroup>

    </h:panelGroup>




    <h:panelGroup layout="block" style="text-align: left; margin-top: 10px;">
        <h:outputText value="Reservas" style="font-size: 15px;" />
    </h:panelGroup>
    <p:separator style="background-color: yellowgreen;" />
    <h:panelGroup layout="block" style="text-align: right;">
        <p:commandLink actionListener="#{gestionMesasBean.nuevoMovimiento}"
               process="@this"
               update="@form" >
            Nueva reserva
        </p:commandLink>
    </h:panelGroup>
    

</ui:composition>